#app {

  background: #F6F7FC !important;
}

#studyCenter {
  background: #F6F7FC;
  // height: calc(100vh - 144px - 16px);
  // margin-top: -100px;
  .studyCon {
    width: 1240px;
    margin: auto;

  }

  //头部
  .studyHeader {

    //面包屑
    .con-header {
      display: inline-block;
      padding-top: 18px;
      padding-bottom: 30px;
      width: 23%;

      span {
        color: #a1a1a1;
      }

      .ivu-breadcrumb {
        display: inline-block;

        >span:last-child {
          color: var(--bg-color,'red');
          
        }
      }
    }

    //下拉
    .selectDown {
      padding-left: 2%;
      display: inline-block;

      .text {
        cursor: pointer;
        font-size: 24px;

        img {
          transition: all 300ms linear 0s;
        }

        .active {
          -webkit-transform: rotate(-180deg);
          -moz-transform: rotate(-180deg);
          -o-transform: rotate(-180deg);
          -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
        }


      }
    }
  }

  .headerCon {
    padding-top: 30px;
    // background: #f8f8f8;
    overflow: hidden;
    margin-bottom: 90px;
    background: #F6F7FC;

    >div {
      display: inline-block;
    }

    .left {
      background: #fff;
      width: 23%;
      // height: 758px;
      padding: 50px 0;
      box-sizing: border-box;
      color: #333333;
      font-size: 21px;
      box-shadow: 0px 0px 5px 0px rgba(100, 156, 240, 0.2);
      border-radius: 5px;

      //height: 850px;
      background: #FFFFFF;
      box-shadow: 0px 0px 5px 0px rgba(100, 156, 240, 0.2);
      border-radius: 10px 10px 0px 0px;

      h2 {
        // width: 286px;
        height: 50px;
        background: #FFFFFF;
        border-radius: 10px 10px 0px 0px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px 0 30px;
        cursor: pointer;

        div {
          display: flex;
          align-items: center;

          img {
            margin-right: 20px;
          }
        }

        span {
          user-select: none;
        }

        .zhuan1 {
          transform: rotate(180deg);
        }
      }

      ul {
        //padding: 30px;
        text-align: center;

        &:last-child {
          border-bottom-color: transparent;
        }

        li {
          padding: 0 !important;
          height: 58px;
          margin: 0 !important;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      >div {
        // padding: 30px;
        padding-top: 0px;

        span {
          cursor: pointer;
        }
      }

      >div,
      >ul {
        box-sizing: border-box;

        //border-bottom: 1px solid #eaeaea;
        >div {
          padding-bottom: 20px;
        }

        // img {
        //   display: inline-block;
        //   width: 27px;
        //   height: 27px;
        // }
        span {
          display: inline-block;
          vertical-align: middle;
          height: 28px;
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 28px;

          &:hover {
            color: var(--bg-color,'#FF6900');
          }

        }

        li {

          height: 50px;
          line-height: 50px;
          margin-bottom: 30px;
          padding-left: 45px;
          border-left: 5px solid #fff;

          &.active {
            background: #FFF0E5;
            border-left: 5px solid var(--bg-color,'#FF6900');
            color: var(--bg-color,'#FF6900');
            //width: 280px;
          }
          &.active span{
            color: var(--bg-color,'#FF6900');
            //width: 280px;
          }

          //text-align: center;
          div {
            display: inline-block;
            cursor: pointer;

            .active {
              //background: #FFF0E5;
              height: 28px;
              font-size: 20px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: var(--bg-color,'#FF6900');
              line-height: 28px;

            }
          }
        }
      }
    }

    .right {
      width: 75%;
      float: right;
      background: #f6f7fc;
    }
  }
}
